<template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="10em">
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="分类图标" prop="imgList">
                    <el-upload-image v-model="formData.imgList" :title="title"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分类上级" prop="parent_id">
                    <el-cascader v-model="formData.parent_id" :options="options" :props="{
                        value: 'id',
                        label: 'name'
                    }" @change="handleChange">
                    </el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入分类名称" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
			   <el-form-item label="赠送积分比例(%)" prop="score_rate">
			        <el-input
			            v-model="formData.score_rate"
			            clearable
						type="number"
			            placeholder="100% 填100，1.5% 填1.5 ，0为不赠送"
			        ></el-input>
			    </el-form-item>
			</el-col> -->
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="formData.sort" placeholder="请输入排序号" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
            <el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
        </el-row>
    </el-form>
</template>

<script>
import { post, get } from "@/assets/js/http.js";

export default {
    name: "goods-type-add",
    components: {
        ElUploadImage: () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            props: {
                label: "name",
                value: "id",
                children: "children",
                checkStrictly: true
            },
            formData: {
                imgList: [],
                image_id: "",
                name: "",
                sort: "",
                status: 1,
                // score_rate:'',
                parent_id: '',
            },
            formRules: {
                imgList: [{
                    required: true,
                    message: '请输入',
                    trigger: 'change'
                }],
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                // parent_id: [{
                // 	required: true,
                // 	message: '请选择',
                // 	trigger: 'change'
                // }],
                // score_rate: [
                //                 {
                //                     required: true,
                //                     message: "此项为必填项"
                //                 }
                //             ],
                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            },
            options: [],
			title:'请上传 112rpx * 104rpx 的图片'
        };
    },
    mounted() {
        this.getoptions()
    },
    methods: {
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    formData.parent_id = formData.parent_id[0]
                    console.log(formData)
                    if (formData.imgList.length > 0) {
                        formData.image_id =
                            formData.imgList[0].id;
                    }
                    await post({
                        url: "/admin/shop.GoodsCategory/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                    this.getoptions()
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        },
        //获取父类
        getoptions() {
            get({
                url: '/admin/shop.GoodsCategory/levelCate',
                params: {
                    limit: 999
                },
            }).then(res => {
                this.options = res.list
            })
        },
        handleChange(value) {
            console.log(value);
        }
    }
};
</script>
